<template>
  <CommonTitle title-name="项目基本信息"></CommonTitle>
  <!--    项目基本信息      -->
  <el-card class="card-box">
    <el-form :inline="true">
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="合同名称">
            <el-input v-model="form.contractName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="项目名称">
            <el-input v-model="form.projectName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="合同编号">
            <el-input v-model="form.contractId" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="任务来源">
            <el-input v-model="form.meetingTitle" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <CommonTitle class="m-t30" title-name="承租方(签约方信息)"></CommonTitle>
  <!--    承租方(签约方信息)      -->
  <el-card class="card-box">
    <el-form :inline="true">
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="签约(竞选)方式">
            <el-input :model-value="form.signType === 1 ? '新签' : '续签'" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in form.leaseCustomers" :key="index">
        <el-col :span="24">
          <el-form-item class="el-form-item-width" :label="form.leaseCustomers.length
            ? `承租方(签约方)${index + 1}名称`
            : '承租方(签约方)名称'
            ">
            <el-input :model-value="item.customerName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <CommonTitle class="m-t30" title-name="出租资产和房源信息"></CommonTitle>
  <!--    出租资产和房源信息      -->
  <el-card class="card-box">
    <el-form :inline="true">
      <el-form-item v-for="(item, index) in form.assetsList" :key="index" class="el-form-item-width"
        :label="form.assetsList.length ? `资产${index + 1}名称` : '资产名称'">
        <el-input v-model="item.assetsName" disabled />
      </el-form-item>
      <el-form-item v-for="(item, index) in form.assetsList" :key="index" class="el-form-item-width"
        :label="form.assetsList.length ? `资产${index + 1}位置` : '资产位置'">
        <el-input v-model="item.address" disabled />
      </el-form-item>
      <el-form-item v-for="(item, index) in form.leaseHousings" :key="index" class="el-form-item-width"
        :label="form.assetsList.length ? `资产${index + 1}明细` : '资产明细'">
        <el-input :model-value="item.housingNumber" disabled />
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="租赁面积">
            <el-input v-model="form.leaseTotalArea" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="驿站交付天数(天)">
            <el-input :model-value="form.giveDay || 0" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="租赁周期">
            <el-input :model-value="form.signStartTime + '-' + form.signEndTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="租赁用途">
            <el-input v-model="form.purpose" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item class="el-form-item-width" label="约定开业时间">
            <el-input v-model="form.openTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <CommonTitle class="m-t30" title-name="费用信息"></CommonTitle>
  <!--    出租资产和房源信息      -->
  <el-card class="card-box">
    <el-form label-position="left">
      <el-row>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="我方收款账号">
            <el-input :model-value="form.payeeAccount || ''" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="开户行">
            <el-input :model-value="form.payeeBank || ''" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="保证金(元)">
            <el-input v-model="form.deposit" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="合同金额(元)">
            <el-input v-model="form.contractTotalPrice" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="应收款总金额(元)">
            <el-input v-model="form.receivableTotalPrice" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="装修免租期(月)">
            <el-input v-model="form.freeRentMonth" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="租金递增模式">
            <el-input v-model="form.increaseText" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="递增比例（金额）">
            <el-input v-model="form.increaseDesc" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="支付方式">
            <el-input :model-value="['', '月度', '季度', '半年', '年'][form.payType]" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item class="el-form-item-width" label="增值税率">
            <el-input v-model="form.taxRate" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table class="m-t10" :data="form.leaseRentPlans" :header-cell-style="{ background: '#EDEDED' }" border
      style="width: 100%">
      <el-table-column prop="numberOfPeriods" label="期数"></el-table-column>
      <el-table-column prop="payStartTime" label="期间">
        <template #default="scope">
          <span>{{ scope.row.payStartTime + "-" + scope.row.payEndTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="increaseRatio" label="递增(%)" />
      <el-table-column prop="rentUnitPrice" label="实际租金单价(元/㎡/月)" />
      <el-table-column prop="mounthPrice" label="月度租金(元)" />
      <el-table-column prop="receivableRent" label="期间租金(元)" />
    </el-table>
  </el-card>

  <CommonTitle class="m-t30" title-name="协议经办方信息"></CommonTitle>
  <el-card class="card-box" shadow="never">
    <el-form>
      <el-row>
        <el-col class="d-flex a-center" :span="3">
          <el-form-item class="m-b0" label="经办人">
            <span>{{ form.manageUserName || "暂无" }}</span>
          </el-form-item>
        </el-col>
        <el-col class="d-flex a-center" :span="3">
          <el-form-item class="m-b0" label="部门">
            <span>{{ form.departmentName }}</span>
          </el-form-item>
        </el-col>
        <el-col class="d-flex a-center" :span="3">
          <el-form-item class="m-b0" label="">
            <!-- <span>{{ form.departmentName }}</span> -->
            <el-button type="primary" color="#fc702b" style="color: #fff"
              @click="openHandler(form?.routeUrl)">查看审批流程</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
  ElCard,
  ElRow,
  ElCol,
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
} from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { contractApi } from "@/api/assets";
import { onMounted, reactive, ref } from "vue";

let form = reactive({});

const router = useRouter();

// 从路由path中获取的
const getContractId = router.currentRoute.value.params.contractId;

// 查询会审单
const getHuiShenForm = () => {
  contractApi
    .getCheckupInfo({
      contractId: getContractId,
    })
    .then((res) => {
      for (let key in res.data) {
        if (key == "taxRate") {
          form[key] = res.data[key] ? res.data[key] + "%" : "0%";
        } else {
          form[key] = res.data[key];
        }
      }

      if (form.increaseMode == 1) {
        form.increaseText = "逐年递增";
        form.increaseRate = form.increaseRate || 0;
        console.log(form.increaseRate);
        form.increaseDesc = `第${form.increaseStartYear}年后，逐年递增${form.increaseRate * 100}%`;
      } else if (form.increaseMode == 2) {
        form.increaseText = "隔年递增";
        form.increaseRate = form.increaseRate || 0;
        form.increaseDesc = `第${form.increaseStartYear || 0}年后，每隔${form.periodicIncreaseInterval || 0}年递增${form.increaseRate * 100}%`;
      } else if (form.increaseMode == 3) {
        form.increaseText = "约定递增";
        form.discountAmount = form.discountAmount || 0;
        if (form.discountAmount <= 1) {
          form.increaseDesc = `合同前${form.discountMonths || 0}个月租金减免${form.discountAmount}%`;
        } else {
          form.increaseDesc = `合同前${form.discountMonths || 0}个月租金减免${form.discountAmount}元`;

        }
      }

      if (form.leaseRentPlans && form.leaseRentPlans.length) {
        const totalArea = parseFloat(form.leaseTotalArea || 0);
        form.leaseRentPlans = form.leaseRentPlans.map((r) => {
          r.area = (totalArea / form.leaseHousings.length).toFixed(2);
          r.mounthPrice = r.area * r.rentUnitPrice;
          switch (form.payType) {
            case 1:
              r.receivableRent = r.mounthPrice;
              break;
            case 2:
              r.receivableRent = r.mounthPrice * 3;
              break;
            case 3:
              r.receivableRent = r.mounthPrice * 6;
              break;
            case 4:
              r.receivableRent = r.mounthPrice * 12;
              break;
            default:
              break;
          }
          return r;
        });
      }
    });
};
const openHandler = (url = "") => {
  window.open(url);
};
onMounted(() => {
  getHuiShenForm();
});
</script>

<style lang="scss" scoped>
.fileVoList {
  .fileItem {
    .fileItem-font {
      color: #ff7b56;
      cursor: pointer;
    }
  }
}

.container {
  width: 100%;
  height: auto !important;

  .card-box {
    width: 100%;

    .input-width {
      width: 548px;
    }

    .el-form-item-width {
      width: 100%;
    }
  }

  .button-wrapper {
    width: 100%;
  }
}
</style>
